<template>
	<!--登录组件-->
	<div class="left">
		<!--登录模块-->
		<Login />

		<div class="news">
			<p>商城公告</p>
			<p>SuperMarket Placard</p>
			<ul>
				<li>最后的圣殿骑士</li>
				<li>新书出版</li>
				<li>目标</li>
				<li>全场六折</li>
				<li>周年大酬宾</li>
			</ul>
		</div>
		<div class="sell">
			<h2>图书畅销榜</h2>
			<ul v-for="(book,index) in bookList">
				<li @click="go(index,book)">{{book.book_name}}</li>
			</ul>
			<input type="button" value="更多">
		</div>

	</div>

</template>

<script>
	import Login from "@/components/Login";
	import axios from 'axios';

	export default {
		name: "Left",
		components: {
			Login
		},
		data() {
			return {
				bookList: [],
			}
		},
		created() {
			this.findTop10()
		},
		methods: {
			findTop10() {
				var _this = this;
				axios.get('http://localhost:8080/book/booktop10')
					.then(res => {
						_this.bookList = res.data.slice(0, 10); //响应数据给bookList赋值
						for (var i = 0; i < 10; i++) {
							_this.bookList[i].book_name = i + 1 + "." + _this.bookList[i].book_name;
					
						}
					})
					.catch((error) => {
						console.log(error)
						this.$message.error("网络连接异常...");
						setTimeout(() => {
								// 方法区
								location.reload()
							}, 1000*60*10);		//每一分钟刷新一次页面		 
					});
			},

			go(index, book) {
				let routeUrl = this.$router.resolve({
					path: "/detail",
					query: {
						book_pic: book.book_pic,
						book_name: book.book_name.split(".")[1],
						book_intro: book.book_intro,
						book_membalance: book.book_membalance,
						book_balance: book.book_balance,
						book_type: book.book_type,
						book_bid: book.bid,
						book_num: book.book_number,
						book_sale: book.book_sale,
						book_look: book.book_look,
					}
				});
				window.open(routeUrl.href, '_blank');
			},
		}
	}
</script>

<style>
	@import url("../assets/css/global.css");
	
	.left {
		height: calc(100vh - 210px);
		width: 240px;
		float: left;
	}

	.news {
		border-left: 1px solid lavender;
		border-right: 1px solid lavender;
		border-bottom: 1px solid lavender;
	}

	.news>p:nth-of-type(1) {
		color: orange;
		font-size: 18px;
		margin-left: 10px;
		line-height: 30px;
	}

	.news>p:nth-of-type(2) {
		color: #98bab3;
		font-size: 14px;
		margin-left: 10px;
	}

	.news>ul>li {
		margin-left: 10px;
		padding-left: 20px;
		list-style: none;
		height: 30px;
		line-height: 30px;
		border-bottom: 1px dashed grey;
		font-size: 16px;
		cursor: pointer;
	}

	.news>ul>li:hover {
		text-decoration: underline;
		color: #72a9b0;
	}

	.news>ul>li:last-of-type {
		border-bottom: 1px solid grey;
	}

	.sell {
		float: right;
	}

	.sell>h2 {
		width: 240px;
		height: 50px;
		line-height: 50px;
		color: #5b842d;
		border-bottom: 1px solid grey;
	}

	.sell>ul>li {
		color: #2c7288;
		margin-left: 20px;
		height: 22px;
		font-size: 14px;
		cursor: pointer;
	}

	.sell>ul>li:hover {
		text-decoration: underline;
		color: #ffa500;
	}

	.sell>input {
		width: 45px;
		height: 22px;
		background-color: orange;
		color: white;
		border: none;
		float: right;
		cursor: pointer;
	}

	.sell>input:hover {
		text-decoration: underline;
		color: blue;
	}
</style>
